<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算法可视化 | 小墨AlGO</title>

    <meta name="description" content="小墨AlGO，可视化算法，让算法更简单！">

    <!-- 不允许浏览器缓存此页面，便于后期页面升级 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
    <link rel="stylesheet" href="./assets/css/index.css">
</head>

<body>
    <div class="main">
        <div id="header"></div>
        <div id="container" class="container">
            正在加载中，请稍候...
        </div>
        <div id="sidebar" style="display: none;">
            <div id="control-div">
                <div style="text-align: center;">
                    <label>
                        请输入数组元素，以逗号分隔（中英文逗号均可）
                        <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
                    </label>
                    <input id="getRandomBtn" type="button" value="随便来一个" />
                </div>
                <!-- 排序算法按钮 -->
            </div>
            <div id="console-div" style="display: none;">
                <div style="text-align: center;">
                    <input type="button" value="停止排序" onclick="location.reload();" />
                </div>
                <div id="console-current-algorithm"></div>
                <div id="console-current-array"></div>
                <div id="console-logs"></div>
            </div>
        </div>
    </div>

    <!-- 导航栏 header -->
    <script defer src="./assets/js/header.js"></script>

    <!-- 深色模式 -->
    <script defer src="./assets/js/darkmode.js"></script>

    <!-- D3.js refer: https://d3js.org/ -->
    <script src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"></script>

    <!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
    <script src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"></script>

    <script>
        function documentWriteScript(src) {
            document.write('<' + 'script src="' + src + '"><' + '/script>')
        }
        !d3 && documentWriteScript("./assets/lib/d3/7.4.4/d3.min.js")
        !gsap && documentWriteScript("./assets/lib/gsap/3.10.4/gsap.min.js")
    </script>

    <!-- class -->
    <script defer id="script-class" src="./assets/js/class.js"></script>

    <!-- 排序算法 -->
    <script defer src="./assets/js/algorithm/sort.js"></script>

    <!-- 主script -->
    <script defer src="./assets/js/index.js"></script>

    <!-- 算法测试 -->
    <!-- <script defer src="./assets/js/algorithm/test.js"></script> -->
</body>

</html>